<template>
    <div class="ex-pictures">
        <div class="ep-wrapper-title">
            <div class="ep-type">
                <div class="ep-type-detail">{{ content.type }}</div>
                <div class="ep-heng">-</div>
                <div class="ep-type-date">{{ dateFilter(publishTime, "MM/dd/yyyy") }}</div>
                <div class="ep-heng">-</div>
                <div class="ep-type-author">{{ content.author }}</div>
            </div>
            <div class="ep-title">
                {{ content.title }}
            </div>
        </div>
        <div class="ep-wrapper">
            <div
                    class="ep-content"
                    v-html="vHtml"
                    @click="onClickHandler"
            ></div>
            <div class="em-btn-line">
                <div class="em-more-btn" @click="downloadClick(content.doc.resourceUrl)">Download</div>
            </div>
        </div>
    </div>
    <div class="dialogContent">
        <el-dialog v-model="dialogVisible" :show-close=false :destroy-on-close=true>
            <ImageDetail :picUrl="picUrl"
                         :hqPicUrl="hqPicUrl"
                         :title="picContent.title"
                         :des="picContent.des"
                         :publishTime="picContent.date"></ImageDetail>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
    import {ref, h, render, onMounted} from "vue";

    const props = defineProps({
        data: {
            type: Object,
            required: true,
        },
        time: {
            type: String,
            required: false,
        },
    });

    const content = ref({...props.data});
    const vHtml = ref('')
    const publishTime = ref(props.time ? props.time : new Date().getTime());
    const onClickHandler = (e: Event) => {
        //可以通过class类名来判断，也可以通过tagName来判断
        if (e.target.nodeName === "IMG") {
            showDetail(e.target.currentSrc, e.target.alt)
        }
        if (e.target.nodeName === "DIV") {
            let cl = e.target.classList;
            if (cl[1]) {
                let str = cl[1];
                let r = str.match(/video-\d+/g);
                if (r.length > 0) {
                    download(videoList.value[r[0]])
                }
            }
        }

        // const classList = e.target.classList;
        //v-html里假如有一个渲染类名为test的元素button
        // if(classList.contains("test")){
        //     //点击事件执行的逻辑
        // }
        //或者使用tagName来判断,但是这里要确定tagName是否唯一，所以个人感觉还是使用classList判断
        // const tagName = e.target.tagName.toLowerCase()
        // if(tagName === "button"){ //点击事件执行的逻辑 }
    };


    // 动态插入视频下载模块
    const videoList = ref({});
    const insertVideoDownLoad = (vhtml: string) => {
        let b = 0;
        let videoBegin = "<video"
        let videoEnd = "</video>"
        let videoNum = 0;
        let videoClass = "video-"
        let videoDownload = "";
        let url = "";
        while (true) {
            b = vhtml.indexOf(videoBegin, b);
            if (b == -1) break;
            url = findSource(vhtml, b);
            videoNum++;
            videoList.value[videoClass + videoNum] = url;
            videoDownload = '<div class="video-download-container"><div class="video-title"></div><div class="em-more-btn ' + videoClass + videoNum + '">Downlaod Video</div></div>';
            b = vhtml.indexOf(videoEnd, b);
            vhtml = fnInsertStr(vhtml, b + 8, videoDownload);
            b = b + 1;
        }
        vHtml.value = vhtml;
    }
    const findSource = (vhtml: string, begin: number) => {
        let sourcebegin = 'src="'
        let sourceend = '"'

        let beginIndex = vhtml.indexOf(sourcebegin, begin);
        let endIndex = vhtml.indexOf(sourceend, beginIndex + 5);
        let url = vhtml.substring(beginIndex + 5, endIndex);
        return url
    }

    const fnInsertStr = (orgStr: string, index: number, str: string) => {
        let r = orgStr.substring(0, index) + str + orgStr.substring(index + 1)
        return r;
    };

    insertVideoDownLoad(vHtml.value);
    ////////

    const dialogVisible = ref(false);
    const picUrl = ref("");
    const hqPicUrl = ref();
    const picContent = ref({
        date: "03/19/2024",
        title: "This is a title",
        des: "Detail"
    })
    const showDetail = (url: string, alt: string) => {
        let altContent = [];
        altContent = alt.split("/*/");
        if (altContent.length > 0) {
            picContent.value.title = altContent[0];
            picContent.value.des = altContent[1];
            picContent.value.date = altContent[2];
            hqPicUrl.value = altContent[3]
        }
        dialogVisible.value = true;
        picUrl.value = url;
    }

    // 下载PDF
    const downloadClick = (url: string) => {
        if (!url || url == "null") return;
        // 创建一个隐藏的 a 标签
        const filePath = url;
        let a = document.createElement('a');
        a.href = filePath;
        a.target = '_blank';
        a.download = ''; // 设置 download 属性可以触发下载
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }

    const config = useRuntimeConfig();
    const apiURL = config.public.apiURL;
    //下载视频\图片
    const download = (link: string) => {

        let url = link;
        let fileName = url.slice(url.lastIndexOf("/") + 1); //下载的文件名换成自己的
        const a = document.createElement('a');
        a.href = `/api/file/download/video/${fileName}`;
        a.download = fileName;
        // a.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
        a.click()
    }
    onMounted(() => {
        vHtml.value = content.value.json_article_content;
        insertVideoDownLoad(vHtml.value);
        const protocol = window.location.protocol === 'https:';
        if (protocol) {
            // picUrl.value = props.picUrl.replace("http", "https");
            vHtml.value = vHtml.value.replaceAll("src=\"http://", "src=\"https://");
        }
    });

</script>
<style scoped lang="scss">
    .ex-pictures {
        background: #fff;
        width: 1920px;
        padding: 50px 0px;

        .ep-wrapper-title {
            width: 1400px;
            padding-left: 260px;
            // padding-left: 160px;

            .ep-type {
                display: inline-flex;

                .ep-type-detail {
                    height: 22px;
                    font-size: 16px;
                    line-height: 22px;
                    color: #c78e66;
                }

                .ep-heng {
                    width: 12px;
                    margin: 0 9px;
                    line-height: 22px;
                    // border-bottom: 1px solid rgba(0, 0, 0, 0.25);
                    font-size: 20px;
                }

                .ep-type-date {
                    width: 89px;
                    // text-align: center;
                    font-size: 16px;
                    line-height: 22px;
                }

                .ep-type-author {
                    width: 89px;
                    // text-align: center;
                    font-size: 16px;
                    line-height: 22px;
                }
            }

            .ep-title {
                width: 100%;
                font-size: 64px;
                color: #30363a;
                line-height: 112px;
                font-weight: 700;
                // text-align: center;
            }

            .ep-des {
                width: 100%;
                // text-align: center;
                font-size: 32px;
                // line-height: 112px;
            }
        }

        .ep-wrapper {
            //border-bottom: 1px solid rgba(0, 0, 0, 0.15);
            padding: 0 170px;
            padding-top: 30px;

            .ep-content {
                padding: 0 100px;
                line-height: 50px;
                font-size: 22px;

                :deep(img) {
                    cursor: pointer;
                }

                :deep(video) {
                    width: 1380px;
                }
            }

            .em-btn-line {
                width: 1640px;
                padding: 50px 670px;
                padding-bottom: 100px;
            }

        }
    }

    :deep(.video-download-container) {
        display: inline-flex;
        // padding: 10px 0px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        width: 1380px;

        .video-title {
            font-size: 24px;
            width: 1080px;
            height: 68px;
            line-height: 38px;
            font-weight: 600;
        }

    }

    :deep(.em-more-btn) {
        width: 300px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: rgb(199, 142, 102, 0.08);
        border-bottom: 4px solid #c78e66;
        color: #000000;
        font-size: 22px;
        cursor: pointer;
        user-select: none;

        img {
            margin-top: 14px;
            margin-left: 80px;
            margin-right: 8px;
            width: 32px;
            height: 32px;
            border: 2px dashed rgba(0, 0, 0, 0.2);
        }
    }

    :deep(.em-more-btn:hover) {
        background: rgb(199, 142, 102, 0.58);
    }

    .dialogContent {
        :deep(.el-dialog) {
            width: 1024px;
            padding: 0px;
        }

        :deep(.el-dialog__header) {
            display: none;
        }

        :deep(.el-dialog__footer) {
            padding: 10px;
            padding-left: 32px;

        }


        .dialogVideoContent img {
            width: 1024px;
        }

        .detailContent {
            width: 1024px;
            padding: 10px 30px;


            .detailContent-left {
                width: 900px;
                display: inline-block;
                padding: 10px;

                .dialog-title {
                    line-height: 32px;
                    font-size: 22px;
                    color: #000;
                    // margin-top: 12px;
                    font-weight: 600;

                }

                .dialog-dsc {
                    line-height: 22px;
                    color: #000;
                    font-size: 100%;

                }

                .dialog-date {
                    margin-top: 12px;
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.25);
                }
            }

            .detailContent-right {
                width: 50px;
                display: inline-block;

                .emc-btn {
                    width: 32px;
                    height: 32px;
                    background-image: url('/images/home/组23@2x.png');
                    background-size: cover;
                    border: 2px dashed rgba(0, 0, 0, 0.2);
                    cursor: pointer;
                    transition: background-color .3s;
                }
            }


        }

    }
</style>
